<template>
  <div class="login-bg">
    <div class="login-card">
      <h2 class="login-title">登录</h2>
      <el-form :model="form" class="login-form">
        <el-form-item>
          <el-input v-model="form.student_id" placeholder="用户名" prefix-icon="el-icon-user" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" placeholder="密码" prefix-icon="el-icon-lock" show-password />
        </el-form-item>
        <!-- <el-form-item>
          <div class="captcha-row">
            <el-input v-model="form.captcha" placeholder="验证码" style="flex:1;" />
            <img class="captcha-img" :src="captchaUrl" @click="refreshCaptcha" alt="验证码" />
          </div>
        </el-form-item> -->
        <el-form-item>
          <el-checkbox v-model="form.remember">记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="success" style="width: 100%;" @click="login">登录</el-button>
        </el-form-item>
        <div class="login-links">
          <el-link type="success" @click="goRegister">注册</el-link>
          <el-link type="info" @click="goForgot" style="margin-left: 24px;">忘记密码？</el-link>
        </div>
      </el-form>
    </div>
    <div class="login-footer">
      <div>{{ now }} | <el-link type="info" href="#">介绍</el-link> | <el-link type="info" href="#">判题服务</el-link> | <el-link type="info" href="#">判题结果</el-link></div>
      <div style="margin-top: 4px;">© 2020-2025 <el-link type="success" href="#">Online Judge</el-link>. All Rights Reserved. Version: 2.2.6</div>
    </div>
  </div>
</template>

<script>
import { login} from '@/api/oj';
export default {
  name: 'LoginView',
  data() {
    return {
      form: {
        student_id: '',
        password: '',
        captcha: '',
        remember: false
      },
      captchaUrl: 'https://dummyimage.com/180x40/eee/888&text=9766',
      now: new Date().toLocaleString()
    }
  },
  methods: {
    refreshCaptcha() {
      // 实际项目应请求新验证码
      this.captchaUrl = 'https://dummyimage.com/180x40/eee/888&text=' + Math.floor(Math.random() * 9000 + 1000);
    },
    async login() {
      let data = {
          student_id: this.form.student_id,
          password: this.form.password,
      };
      const res = await login(data);
      if(res.data.code === 200){
        this.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
  
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("user", res.data.data.username); // 根据后端响应结构获取用户名
            localStorage.setItem("isLoggedIn", true);
            window.history.back(); 
        }else{
           this.$message.error(res.data.message || '登录失败');
        }
    },
    goRegister() {
      this.$message.info('跳转注册');
    },
    goForgot() {
      this.$message.info('跳转找回密码');
    }
  }
}
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.login-card {
  margin: 48px auto 0 auto;
  width: 520px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
  padding: 32px 40px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.login-title {
  text-align: left;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #222;
}
.login-form {
  width: 100%;
}
.captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.captcha-img {
  width: 180px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #eee;
  cursor: pointer;
  background: #f5f5f5;
}
.login-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 0;
  gap: 16px;
}
.login-footer {
  width: 100%;
  text-align: center;
  color: #888;
  font-size: 14px;
  margin-top: 32px;
  margin-bottom: 8px;
}
</style>